<template>
	<div class="the-content-title">
		<div class="title-row">
			<div class="title">{{ title }}</div>
			<div class="rightButtons"><slot></slot></div>
		</div>
		<div class="line" />
		<!-- <hr />
		<hr /> -->
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		title: {
			type: String,
			default: ''
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
$lineColor : limegreen;
$shortLineWidth:3px;
$shortLineHeight:14px;
$longLineHeight:5px;
.the-content-title {
	position: relative;
	display: flex;
	flex-direction: column;
	// align-items: center;
	// justify-content: center;

	width: 100%;
	height: 60px;
	background: linear-gradient(
		179deg,
		rgba(0, 206, 125, 0.04) 0%,
		rgba(0, 206, 125, 0.06) 16%,
		rgba(0, 206, 125, 0.07) 33%,
		rgba(0, 206, 125, 0.08) 50%,
		rgba(0, 206, 125, 0.09) 68%,
		rgba(0, 206, 125, 0.11) 85%,
		rgba(0, 206, 125, 0.12) 100%
	);
	// opacity: 0.32;
	// background: linear-gradient(179deg, rgba(0,206,125,0.13) 0%, rgba(0,206,125,0.17) 16%, rgba(0,206,125,0.2) 33%, rgba(0,206,125,0.25) 50%, rgba(0,206,125,0.29) 68%, rgba(0,206,125,0.33) 85%, rgba(0,206,125,0.36) 100%);
	
	border-bottom: 2px solid $lineColor;
	color: #ffffff;
	//底边粗横线
	&::before {
		content: '';
		position: absolute;
		width: 33%;
		height: $longLineHeight;
		background-color: $lineColor;
		left: 0;
		bottom: - $longLineHeight / 2;
	}
	//左侧 1 竖线
	&::after {
		content: '';
		position: absolute;
		width: $shortLineWidth;
		height: $shortLineHeight;
		bottom: - $shortLineHeight / 2;
		left: 0;
		background-color: $lineColor;		
	}
	// 右侧 2 竖线
	.line {
		&::before {
			content: '';
			position: absolute;
			width: $shortLineWidth;
			height: $shortLineHeight;
			bottom: - $shortLineHeight / 2;
			right: 0;
			background-color: $lineColor;
		}
		&::after {
			content: '';
			position: absolute;
			width: $shortLineWidth;
			height: $shortLineHeight;
			bottom: - $shortLineHeight / 2;
			right: 8px;
			background-color: $lineColor;
		}
	}
	//标题行
	.title-row {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		width: 100%;
		height: 60px;
		.title {
			padding-left: 30px;
			height: 24px;
			font-size: 24px;
			font-weight: 500;
			line-height: 30px;
		}
		.rightButtons {
			padding-right: 10px;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}
	}
}
</style>
